1.下载安装

npm i react-router-dom -s

2.创建router.js文件配置路由

import { lazy, useEffect } from 'react'

import {Navigate,useLocation,useRoutes} from 'react-router-dom'

const Inedx = lazy(()=>import('./Main/Inedx'))                             //路由懒加载

const Router = () => {

  return ()                                        

}

const Layout = ()=>{

    return useRoutes([                

        {

            path:'/',

            element:

        },

        {

            path:'/main',

            element:,}]）

    }

export default Router

3.在main.js文件中全局配置路由

import {HashRouter as Hash} from 'react-router-dom'

import { Suspense } from 'react'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

            }>

)

4.路由api

lazy路由懒加载  Suspense路由加载前的渲染等待

Routers替代了react-router v5 中的 Switch

Navigate 替代了react-router v5 中的 Redirect

element替代了react-router v5 中的 component

useRoutes()  将组件转化为对象写法

路由跳转用了hooks中的useNavigate()   编程式导航  

const router = useNavigate() 

router(-1)  返回

路由传参使用的了useParams()和useSearchParams()还有useLocation()

 const params = useParams()          //params用/： 占位传

 const [query] = useSearchParams()  //query用？传

const {pathname} = useLocation()   //获取location中pathname 路径  

{params.xxxx}

{query.get('xxx’) }

 Outlet  子路由出口